<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title></title>

    <link href="css/all.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div class="div_find">

        <p><label class="find_labela">物资申请编号：</label><input type="text" class="find_input">
            <label class="find_labela">申请人ID：</label>
            <input type="text" class="find_input">
            <label class="find_labela">申请人姓名：</label><input type="text" id="demo" class="find_input">
        </p>
        <p>
            <label class="find_labela">申请物资ID：</label><input type="text" class="find_input">
            <label class="find_labela">申请物资名：</label>
            <input type="text" class="find_input">
            <label class="find_labela">申请数量：</label><input type="text" id="demo" class="find_input">


        </p>
        <p>
            <label class="find_labela">申请状态：</label><select class="form_input">
                <option>申请中</option>
                <option>通过审批</option>
                <option>未通过审批</option>

            </select>
            <label class="find_labela">处理人ID：</label><input type="text" id="demo" class="find_input">
            <label class="find_labela">户主名字：</label><input type="text" class="find_input"><input type="button" value="申请" class="find_but" id="but_open"><input type="button" value="重置" class="find_but" id="but_close02">
        </p>

    </div>
    <p class="p_but">


        <i class="down_i"></i><a href="#" class="add_a">全部导出</a>

    </p>
    <p>
        <table data-url="json/data_alae_list.json" id="table" class="table_style" style="margin: 0 auto">
        </table>
    </p>

    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/bstable/js/bootstrap.min.js"></script>
    <script src="js/bstable/js/bootstrap-table.js"></script>
    <script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/date/js/laydate.js"></script>
    <script>
        ! function() {
            laydate.skin('danlan'); //切换皮肤，请查看skins下面皮肤库
            laydate({
                elem: '#demo'
            });
            laydate({
                elem: '#demo1'
            }); //绑定元素
        }();
    </script>

    <script type="text/javascript">
        $(function() {
            $('#table').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/download.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams: null,
                columns: [{
                        checkbox: "true",
                        field: 'check',
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: "编号",
                        field: 'id',
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: '标题',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: '类型',
                        field: 'type',
                        align: 'center',
                        valign: 'middle'
                    },

                    {
                        title: '提交人',
                        field: 'person',
                        align: 'center'
                    }, {
                        title: '提交时间',
                        field: 'date',
                        align: 'center'
                    },



                    {
                        title: '操作',
                        field: 'opear',
                        align: 'center',
                        formatter: function(value, row) {
                            var e = '<a  href="#" title="下载" onclick="openlayer(\'' + row.id + '\')">下载</a> ';



                            return e;
                        }
                    }
                ]
            });
        })
    </script>
    <script src="js/layer_v2.1/layer/layer.js"></script>
    <script>
        function openlayer(id) {
            layer.open({
                type: 2,
                title: '添加信息',
                shadeClose: true,
                shade: 0.5,
                skin: 'layui-layer-rim',
                //            maxmin: true,
                closeBtn: 1,
                area: ['98%', '92%'],
                shadeClose: true,
                closeBtn: 1,
                content: 'addNotice.html'
                    //iframe的url
            });
        }
    </script>
    <script>
        $(function() {
            $(".find_span").click(function() {
                $("#open").show();
                $(this).hide();
                $(".find_span1").show();
                $("#but_close02").hide();
                $("#but_open").hide();

            })
            $(".find_span1").click(function() {
                $("#open").hide();
                $(this).hide();
                $(".find_span").show();
                $("#but_open").show();
                $("#but_close02").show();

            })

        })
    </script>

</body>

</html>